<template>
  <div class="pages poslakaraList">
    <div class="pageLevel" v-if="!sub">
      <!-- 操作框 -->
      <div class="operationBox tableSearch">
        <el-button type="primary" @click="routerPushAdd('1')" v-if="setRole('新增')" size="mini">新增</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px">
          <!-- v-if="!isSD" -->
          <el-form-item label="绑定的门店:" label-width="100px" v-if="setRole('新增')">
            <el-select filterable size="small" style="width:200px" v-model="selectData.bindingStores">
              <el-option v-for="item in bindingStoresList" :key="item.index" :label="item.shopName" :value="item.shopId"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="终端编号:" label-width="100px">
            <el-input class="input" v-model="selectData.keyword" size="small" placeholder="请输入查询的终端编号"></el-input>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchSelect" class="Button">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table ref="multipleTable" :data="bindArray" @selection-change="handleSelectionChange" stripe style="width: 100%">
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <el-table-column prop="code" label="终端编号" align="center"></el-table-column>
          <el-table-column prop="createTime" label="绑定的时间" align="center" :formatter="tim"></el-table-column>
          <el-table-column prop="orgType" align="center" label="组织机构类型"></el-table-column>
          <el-table-column prop="parentName" label="上一级单位" align="center"></el-table-column>
          <el-table-column prop="shopName" label="绑定的门店" align="center"></el-table-column>
          <el-table-column prop="mchid" align="center" label="商户号"></el-table-column>
          <el-table-column prop="relateCode" align="center" label="门店POS设备号"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" v-if="setRole('删除')" @click="deletes(scope.row.id)" type="text" class="delete">删除</el-button>
              <el-button size="small" v-if="setRole('变更')" @click="routerPushedit('2', scope.row.id)" type="text" class="addDetail">变更</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"></el-pagination>
        </div>
      </div>

    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { 
  getLaKaDeviceListPage,
deleteLakaDevice,
getChildOrgList
}
from
"@/api";
export default {
  computed: mapState(["merchantId", "power", "sub"]),
  data() {
    return {
      selectData: {
        bindingStores: "", //绑定的门店
        keyword: "" // 搜索关键字
      },
      bindArray: [], // 表格数组
      multipleSelections: [], // pos多选数组
      bindingStoresList: [], //绑定门店的数组
      // 分页开始
      pageSize: 10,
      totalItems: 0,
      currentPage: 1
    };
  },
  mounted() {
    this.findSupplierListPage(this.pageSize, this.currentPage); // 获取供应商列表
    this.bindingStoresLists();
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.findSupplierListPage(this.pageSize, this.currentPage);
        }
      },
      deep: true
    }
  },
  methods: {
    tim(row, column, cellValue) {
      return util.foryear(cellValue) + " " + util.fortime(cellValue);
    },
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    findSupplierListPage(pageSize, pageNum) {
      let data = {
        orgId:this.merchantId,
        pageSize: pageSize,
        pageNum: pageNum,
        shopId: this.selectData.bindingStores,
        code: this.selectData.keyword
      };
      getLaKaDeviceListPage(data).then(res => {
        if (res.data != null) {
          this.bindArray = res.data.list;
          this.totalItems = res.data.pageTotal;
        }
      });
    },
    // 新增路由
    routerPushAdd(showTab) {
      util.routerTo(
        "/operate-management/pos-management/pos-lakaraList/pos-lakaraDetail",
        { showTab: "1" }
      );
    },
    // 变更路由
    routerPushedit(showTab, lakaraId = "") {
      util.routerTo(
        "/operate-management/pos-management/pos-lakaraList/pos-lakaraDetail",
        { showTab: "2", id: lakaraId }
      );
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelections = val;
    },
    // 点击删除按钮
    deletes(id) {
      let supplierIdsArr = [];
      this.multipleSelections.map(i => {
        supplierIdsArr.push(i.id);
      });
      // if (supplierIdsArr.length > 0 || id != undefined) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        let data = {
          id: id
        };
        deleteLakaDevice(data).then(res => {
          if(res.code=="200"){
            this.$message({
            showClose: true,
            message: res.msg,
            type: "success"
          });
          this.findSupplierListPage(this.pageSize, this.currentPage);
          }else{
            this.$message({
            showClose: true,
            message: res.msg,
            type: "error"
          });
          }
        });
      });
    },
    // 绑定门店的接口
    bindingStoresLists() {
      let data = {
        orgId: this.merchantId
      };
      getChildOrgList(data).then(res => {
        if (res.data != null) {
          let a={
            shopId:"",
            shopName:"全部"
          }
          res.data.unshift(a)
          this.bindingStoresList = res.data;
        }
      });
    },
    // 点击查询按钮
    searchSelect() {
      this.findSupplierListPage(this.pageSize, 1);
    },
    //跳页
    toPage() {
      this.findSupplierListPage(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findSupplierListPage(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findSupplierListPage(this.pageSize, val);
    }
  }
};
</script>
